// 售后详情页
import React,{useState,useEffect} from 'react'
import { Button,Image,Card,Descriptions,Table } from 'antd';
import { RightOutlined } from '@ant-design/icons';
import {useNavigate} from 'react-router-dom'
import './AfterDat.less'
import img from '../../img/1.png'
const AfterDat=()=>{
    const [state,setcolor]=useState(true)
    const navigate=useNavigate()
    // const rowdata=JSON.parse(sessionStorage.getItem('rowdata')) 
    const [load,setLoad]=useState(true)
    const XQdata=JSON.parse(sessionStorage.getItem('shangpingXQ')); 
    useEffect(()=>{
      setTimeout(()=>{
        setLoad(false);
      },3000)
      console.log(XQdata);
    },[])
    function setcol() {
        setcolor(false)
    }
    function fanhui(params) {
        // sessionStorage.removeItem(XQdata)
        navigate('/home/Aftersales')
        // window.location.href='/home/order'
    }
    // 表格头
    const columns = [
        {
          title: '时间',
          dataIndex: 'name',
          align:'center',
          className:'tit',
          width:'100px',
          render: (text, record)=>
            //   console.log(record.img);
              <div style={{display:'flex',justifyContent:'space-around',alignItems:'center'}}>
                 <span>{text}</span>
              </div>
        },
        {
          title: '备注人',
          dataIndex: 'sale',
          align:'center',
          width:'100px'
        },
        {
          title: '备注信息',
          dataIndex: 'count',
          align:'center',
          width:'100px'
        },
      ];
    //   表格数据
      const data = [
        {
          key: '1',
          name: XQdata.orderTime,
          sale: '管理员',
          count: XQdata.refundIns,
          freight: 18889898989,
          money: '你在哪万人中央感受万丈荣光',
          date:'2020-2-3',
          total:'20',
        },
       
      ];
    return ( 
        <div className="mian">
            {/* 第一行 */}
            <div className="top">
                <Button type="primary" onClick={fanhui}>返回</Button>
                <div className="top1">
                    <span>售后管理</span> <RightOutlined />  <span>售后详情</span>
                </div>
                <div className="top2">
                    <div className="topimg">
                        <Image src={img} style={{borderRadius:'5px'}}></Image>
                    </div>
                    <span>{XQdata.userIdName}</span> 
                    <span>状态：{XQdata.dealStatus==1?'处理中':'已处理'}</span>
                    <span>申请时间：{XQdata.orderTime}</span>
                    <span>{XQdata.goodsName}</span>
                </div>
                <Button type="primary"  style={{backgroundColor: "#171c49",borderStyle:'none',marginLeft:'10px',fontWeight:'bold',padding:'0px 20px'}}>通过</Button>
                <Button type="primary"  style={{backgroundColor: "rgb(153,153,153)",borderStyle:'none',marginLeft:'10px',fontWeight:'bold',padding:'0px 20px'}}>拒绝</Button>
            </div>
            <Card type="inner" title="买家信息" style={{margin:'20px 0'}} headStyle={{fontWeight:'bold'}}>
                <p style={{fontWeight:'bold'}}>账号ID/微信名称：{XQdata.userIdName}</p>
                <p style={{fontWeight:'bold'}}>手机号码：{XQdata.phone}</p>
                <p style={{fontWeight:'bold'}}>下单时间：{XQdata.applyTime}</p>
                <p style={{fontWeight:'bold'}}>微信支付商户订单号：</p>
                <p style={{fontWeight:'bold'}}>商品详情：{XQdata.properties}</p>
            </Card>
            <Card type="inner" title="申请详情" style={{margin:'20px 0'}} headStyle={{fontWeight:'bold'}} bordered={load} loading={load} hoverable={true}>
                <p style={{fontWeight:'bold'}}>售后类型：{XQdata.refundType==0?'待处理':XQdata.refundType==1?'处理中':'已完成'}</p>
                <p style={{fontWeight:'bold'}}>商品类型：</p>
                <p style={{fontWeight:'bold'}}>美物订单编号：</p>
                <p style={{fontWeight:'bold'}}>1688订单编号：</p>
                <p style={{fontWeight:'bold'}}>实付款：{XQdata.costs}</p>
                <p style={{fontWeight:'bold'}}>联系方式：{XQdata.phone}</p>
                <p style={{fontWeight:'bold'}}>退款说明：{XQdata.refundIns}</p>
                <div>
                    <p style={{fontWeight:'bold'}}>图片凭证： </p>
                    <Image src={img} style={{width:'50px',height:'50px',marginRight:'10px'}}></Image>
                    <Image src={img} style={{width:'50px',height:'50px',margin:'0 10px'}}></Image>
                    <Image src={img} style={{width:'50px',height:'50px',margin:'0 10px'}}></Image>
                </div>
            </Card>
            <Card type="inner" title="后台备注记录" headStyle={{fontWeight:'bold'}}>
                    <Table columns={columns} dataSource={data} bordered pagination={false} style={{width:'50%'}}/>
            </Card>
            <Card type="inner" title="后台备注" style={{margin:'20px 0'}} headStyle={{fontWeight:'bold'}}>
                <p>{XQdata.dealStatus==-1?'已拒绝':'通过'}</p>
            </Card>
        </div>
    )
}
export  default AfterDat; 
